<template>
  <m-content class="dictation-wrapper">
    <template #header-right-btn>
      <m-button type="primary" @click="toPage(secondaryRoutes.home)"
        >返回首页</m-button
      >
    </template>

    <div class="content-wrapper flex m-auto w-auto">
      <div class="level-box y-scroll-auto">
        <p class="title">词典选择</p>
        <div class="list grid gap-1 grid-cols-2 .sm:grid-cols-1 y-scroll-auto">
          <div
            class="list-item"
            :class="item.id === state.activeDictionaryId ? 'active' : ''"
            v-for="(item, index) in state.data"
            :key="item.id"
            @click="changeSelected(item)"
          >
            <div class="info">
              <p class="text">{{ item.dictionaryName }}</p>
              <p class="total">
                <span class="num">{{ item.totalWord }}</span
                >词
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="chapter-box y-scroll-auto">
        <p class="title">章节选择</p>
        <div class="list grid gap-1 grid-cols-4 .sm:grid-cols-2 y-scroll-auto">
          <div
            class="list-item"
            v-for="item in state.chapterList"
            :key="item.id"
            @click="handleClick(item)"
          >
            <p class="text">{{ item.chapterName }}</p>
            <p class="total">
              <span class="num">{{ item.totalWord }}</span
              >词
            </p>
            <div class="progress-bar" :style="{ width: `${item.progress}%` }">
              <div class="progress-inner-bar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </m-content>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { secondaryRoutes } from '@/router'
import globalApi from '@/http/api'
import { setLocalWordData, getLocalWordData, getProgress } from '@/utils/util'
import globalConfirm from '@/components/common/confirm/m-confirm.js'

const api = {
  getList: globalApi.dictionary.getList
}

const router = useRouter()
const state = reactive({
  data: [],
  activeDictionaryId: '',
  chapterList: []
})

getList()
function getList() {
  api.getList({}).then((res) => {
    const localData = getLocalWordData()
    state.data = res.data.reduce((arr, item) => {
      let { chapterList } = item
      // 获取章节进度
      for (let i = 0; i < chapterList.length; i++) {
        let { id: chapterId, totalWord } = chapterList[i]
        let finishedCount = localData[chapterId] || 0
        chapterList[i].finishedCount = finishedCount
        chapterList[i].progress = getProgress(finishedCount, totalWord)
      }
      arr.push(item)
      return arr
    }, [])
    if (state.data.length > 0) {
      state.activeDictionaryId = state.data[0].id
      state.chapterList = state.data[0].chapterList
    }
  })
}

// 切换选中
function changeSelected(item) {
  state.activeDictionaryId = item.id
  state.chapterList = item.chapterList
}

/** 听写 Limengqing 2022-11-21 19:00:54 ************************************************************/
function handleClick(item) {
  const start = () => {
    // 浏览器中存储
    setLocalWordData({
      [item.dictionaryId + '-' + item.id]: item.finishedCount
    })
    const query = {
      dictionaryId: state.activeDictionaryId,
      chapterId: item.id,
      chapterName: item.chapterName
    }
    if (item.page) {
      query.page = item.page
    }
    router.push({
      path: secondaryRoutes.dictionaryWord,
      query
    })
  }
  if (item.progress === 100) {
    // 是否需要重新开始
    globalConfirm({
      title: '提示',
      content: '该章节已完成，是否需要重新开始？'
    })
      .then(() => {
        // 重置章节
        item.finishedCount = 0
        start()
      })
      .catch(() => {})
  } else {
    // 从当前进度开始
    start()
  }
}

function toPage(path) {
  router.push(path)
}
</script>
